<template>
  <el-popover title="配置组件属性" placement="top" v-model="visible" width="400" @hide="onPopoverHide">
    <div class="validate-form-container">
      <el-row v-for="(item, index) in rules" :key="index">
        <el-col :span="14">
          <el-row>
            <el-col :span="10">
              <el-select v-model="item.groups.prependValue" placeholder="请选择">
                <el-option v-for="(item, index) in inputGroupOptions" :key="index" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-col>

            <el-col :span="10">
              <el-input v-model="item.groups.inputValue" type="text" placeholder="请输入"></el-input>
            </el-col>

          </el-row>
<!--          <base-input-group-->
<!--            v-model="item.groups"-->
<!--            :prepend-options="inputGroupOptions"-->
<!--            prepend-width="96px"-->
<!--            size="mini"-->
<!--            :append-type="item.type"-->
<!--            @change="inputGroupChange($event, item, index)"-->
<!--          ></base-input-group>-->
        </el-col>
        <el-col :span="10" style="padding-left: 12px;">
          <el-button type="default" icon="el-icon-plus" size="mini" @click="onAdd"></el-button>
          <el-button v-if="rules.length > 1" type="danger" icon="el-icon-delete" size="mini" @click="onDelete(index)"></el-button>
        </el-col>
      </el-row>
    </div>

    <el-button slot="reference" type="primary" icon="el-icon-setting" :disabled="isDisabled">设置组件校验规则配置</el-button>
  </el-popover>
</template>

<script>
import _ from 'lodash';

export default {
  name: 'table-form-item-validate',
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: Array,
    },
    fieldType: {
      type: String,
    },
  },
  data() {
    return {
      visible: false,
      requireForm: {
        required: true,
        message: '',
      },
      inputGroupOptions: [
        { value: 'required', label: '必填', type: 'checkbox' },
        { value: 'max', label: '最大长度', type: 'input' },
        { value: 'min', label: '最小长度', type: 'input' },
      ],
      rules: [],
    };
  },
  watch: {
    /**
     * [
     *    { required: true, message: '请输入', trigger: 'blur' },
     *    { max: 50, message: '可输入最大长度为50', trigger: 'blur' },
     * ]
     */
    value: {
      handler(val) {
        if (val) {
          this.rules = _.cloneDeep(val).map(item => {
            const keys = Object.keys(item);
            return {
              groups: {
                prependValue: item[keys[0]],
                middleValue: item[keys[1]],
                appendValue: item[keys[2]],
              },
              // type: this.inputGroupOptions.find(d => d.value === keys[0]).type,
              rule: item,
            };
          });
        }
      },
      immediate: true,
      deep: true,
    },
    fieldType: {
      handler(val) {
        if (val) {
          // 每次字段类型改变时，都需要重置表单字段
          this.resetRules();
        }
      },
    },
  },
  computed: {
    isDisabled() {
      return !this.fieldType;
    },
  },
  created() {
    if (this.fieldType) {
      this.resetRules();
    }
  },
  methods: {
    /**
     * popover 隐藏回调
     */
    onPopoverHide() {
      this.visible = false;
      this.$emit('change', this.rules.filter(d => d.groups.prependValue).map(d => d.rule));
    },

    inputGroupChange(val, record, index) {
      record.groups = val;
      record.type = this.inputGroupOptions.find(d => d.value === val.prependValue).type;
      record.rule = { [val.prependValue]: val.appendValue, message: val.inputValue, trigger: this._getTriggerType(this.fieldType) };
      // this.$set(this.rules[index], 'groups', val);
      // this.$set(this.rules[index], 'rule', { [val[0]]: val[2], message: val[1], trigger: this._getTriggerType(this.fieldType) });
      console.log(JSON.parse(JSON.stringify(record)));
    },

    _getTriggerType(fieldType) {
      switch (fieldType) {
        case 'input':
        case 'number':
        case 'textarea':
          return 'blur';
        case 'select':
          return 'change';
        default: return 'blur';
      }
    },

    resetRules() {
      this.rules = [{ groups: {}, rule: {} }];
    },

    onAdd() {
      this.rules.push({ groups: {}, rule: {} });
    },

    onDelete(index) {
      this.rules.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.validate-form-container {
  width: 100%;

  .el-row:not(:last-child) {
    padding-bottom: 6px;
  }
}
</style>
